<template>
	<view class="">
		<view class="tit">
			<image src="/static/bcg.png" mode=""></image>
			<view class="content">
				<view class="user">
					<view class="user_l">
						<image :src="userinfo.avatar?userinfo.avatar:'/static/tx.png'" mode=""></image>
						<view class="texst">
							{{userinfo.nickName}}
						</view>
					</view>
					<view class="user_r" @click="loginout">
						<image src="/static/out.png" mode=""></image>
					</view>
				</view>
				<view class="items_flex">
					<view class="items" @click="$pageGo('/pages/index/quotationList')">
						<view class="t1">
							报价列表
						</view>
						<view class="t2">
							<p>输入报价单号 </p>
							<p>即可生成/查询报价详情</p>
						</view>
						<image src="/static/i1.png" mode=""></image>
					</view>
					<view class="items i1"  @click="$pageGo('/pages/index/contractList')">
						<view class="t1">
							合同管理
						</view>
						<view class="t2">
							<p>输入合同单号</p>
							<p>即可查询合同详情</p>
						</view>
						<image src="/static/i2.png" mode=""></image>
					</view>
				</view>
				<view class="btn" @click="$pageGo('/pages/index/quotation?istype=0')">
					<uni-icons style="margin-right: 10rpx;" type="plusempty" color="#fff"></uni-icons>
					新建报价单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserinfo,logout
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				userinfo:{}
			}
		},
		onLoad() {
			getUserinfo().then(res=>{
				this.userinfo = res.user
			})
		},
		methods: {
			loginout(){
				uni.showLoading({
					title: '安全退出中',
					mask: true
				})
				logout().then(res=>{
					uni.hideLoading()
					uni.reLaunch({
						url:'/pages/loging/loging'
					})
				})
			},
			changeLog(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.tit {
		image {
			width: 750rpx;
			height: 510rpx;
		}

	}
	.content{
		position: relative;
		width: 100%;
		margin-top: -100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.user{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user_l{
				display: flex;
				align-items: center;
				image{
					width: 120rpx;
					height: 120rpx;
					margin-right: 40rpx;
				}
				.texst{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
				}
			}
			.user_r{
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.items_flex{
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.items{
				width: 320rpx;
				height: 400rpx;
				background: linear-gradient( 180deg, #3D81FF 0%, #A9D5FF 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 38rpx 54rpx 26rpx 54rpx;
				box-sizing: border-box;
				text-align: center;
				image{
					width: 212rpx;
					height: 184rpx;
					margin-top: 34rpx;
				}
				.t1{
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 40rpx;
					color: #FFFFFF;
				}
				.t2{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 23rpx;
					margin-top: 6rpx;
				}
			}
			.i1{
				background: linear-gradient( 180deg, #F67220 0%, #FDE1A6 100%);
				image{
					width: 200rpx;
					height: 184rpx;
				}
			}
		}
		.btn{
			width: 670rpx;
			height: 100rpx;
			background: #3658FF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>